html{
    font-size: 625%;
}

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #68cdd5;
}

/* .container{
    width: 100%;
    height: 100vh;
    background-color: #68cdd5;
} */

.back{
    position: absolute;
    background-image: url(../images/back@1x.png);
    background-size: .27rem;
    width: .27rem;
    height: .27rem;
    left: .18rem;
    top: .1rem;
}

.main{
    width: 70%;
    margin: 0 auto;
    padding-top: .58rem;
    font-size: .12rem;
    color: #ffffff;
}

.title{
    width: .9rem;
    height: .35rem;
    background-image: url(../images/logo@1x.png);
    background-size: .9rem .35rem;
    margin: 0 auto;
}

.content{
    margin-top: .6rem;
    width: 100%;
}

.icons{
    height: .8rem;
    width: 100%;
    margin-top: .9rem;
}

.icons::after{
    content: "";
    display: block;
    clear: both;
}

.icon1{
    width: .8rem;
    height: 100%;
    float: left;
    text-align: center;
}

.icon2{
    text-align: center;
    width: .8rem;
    height: 100%;
    float: right;
}

.icon1-img{
    width: .42rem;
    height: .42rem;
    margin: 0 auto;
    background-image: url(../images/pic1@1x.png);
    background-size: .42rem;
}

.icon2-img{
    width: .42rem;
    height: .42rem;
    margin: 0 auto;
    background-image: url(../images/pic2@1x.png);
    background-size: .42rem;
}

@media only screen and (-webkit-device-pixel-ratio: 2),only screen and (-webkit-min-device-pixel-ratio: 2) {
    .back{
        background-image: url(../images/back@2x.png);
    }

    .title{
        background-image: url(../images/logo@2x.png);
    }

    .icon1-img{
        background-image: url(../images/pic1@2x.png);
    }

    .icon2-img{
        background-image: url(../images/pic2@2x.png);
    }
}